<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div>
    <div id="y">
        呵呵呵呵呵呵呵呵呵呵
        <div>
            <div id="x">哈哈哈</div>
        </div>
    </div>
</div>

<ul>
    <li>哈哈哈1</li>
    <li>哈哈哈2</li>
    <li>哈哈哈3</li>
    <li>哈哈哈4</li>
    <li>哈哈哈5</li>
    <li>哈哈哈6</li>
    <li>哈哈哈7</li>
    <li>哈哈哈8</li>
    <li>哈哈哈9</li>
    <li>哈哈哈10</li>
</ul>

<script>



    // var lis = document.querySelectorAll('ul li');
    // for (var i = 0; i < 10; i++) {
    //     lis[i].onclick = function () {
    //         console.log(this.innerText)
    //     }
    // }


    var ul = document.querySelector('ul');

    ul.addEventListener('click', function (e) {

        console.log(e.target.innerText)

    });




    // DOM 2级事件绑定
    /**
     * addEventListener 绑定一个事件
     *
     * 参数1：事件名称
     * 参数2：事件的处理程序
     * 参数3：标注是在捕获阶段（true）还是冒泡阶段（false）绑定事件处理程序， 默认是false
     *
     */
    document.getElementById('x').addEventListener('click', function (exxx) {

        console.log(1);
        //阻止事件冒泡
        // exxx.stopPropagation()
        // exxx.stopImmediatePropagation()

    }, false);

    document.getElementById('y').addEventListener('click', function () {
        console.log(2)
    }, false);


    //事件委托绑定




</script>



</body>
</html>